<template>
  <div class="container bg-gray">
    <div class="goods-info">
      <div class="goods-info-inner">
        <div class="flex">
          <div>
            <xd-img :src="detail.avatar|absUrl" class="goods-img" />
          </div>
          <div class="goods-info flex-con">
            <div class="goods-title">
              {{detail.title}}
            </div>
            <div class="flex">
              <div class="flex-con goods-num">
                × {{detail.num}}
              </div>
              <div class="goods-money">
                ￥{{detail.price}}元
              </div>
            </div>
          </div>
        </div>
      </div>
      <img src="../../assets/imgs/other/linerb.png" class="line-rb" alt="">

    </div>
    <div class="flow-list">
      <div class="flow-item" v-for="(item,index) in flowData" :key="item.id" :class="{redtxt:index==0}">
          <div class="message">{{item.trackMessage}}</div> 
          <div class="time-info">
              {{item.trackTime|parseTime}}
          </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        detail: {},
        flowData: []
      };
    },
    created() {
      let id = this.$route.query.item_id;
      if (id) {
        this.showLoading();
        this.$post("/api/bill/express_track_query", {
            itemId: id
          })
          .then(_ => {
            this.flowData = _;
            this.hideLoading();
          })
          .catch(_ => {
            this.hideLoading();
          });
        this.$post("/api/bill/bill_item_detail", {
            id
          })
          .then(data => {
            this.detail = data;
          })
          .catch(_ => {});
      }
    }
  };

</script>
<style scoped lang="scss">
.flow-list{
  background-color: #fff;
  margin-top:0.2667rem;
  padding: 0.4rem;
  line-height: 2em;
  	font-size: 0.3733rem;
  	color: #666666;

}
.time-info{
  	font-size: 0.32rem;
	color: #bbbbbb;

}
.redtxt{
  	color: #ff0006;

}
.flow-item{
  margin-bottom: 0.2667rem;
}
  .goods-info {
    background-color: #fff;
    position: relative;
    .goods-info-inner {
      padding: 0.4rem;
    }
    .goods-img {
      width: 2.64rem;
      height: 1.6933rem;
    }
    .goods-info {
      padding-left: 0.3333rem;
    }
    .goods-title {
      font-size: 0.3467rem;
      color: #17402a;
      padding-bottom: 0.6667rem;
    }
    .goods-num {
      font-size: 0.32rem;
      color: rgba(23, 64, 42, 0.65);
    }
    .goods-money {
      font-size: 0.32rem;
      color: #ff2a2a;
    }
  }

  .line-rb {
    width: 100%;
    display: block;
  }

</style>
